<template>
    <section class="con">
        <div>
            <!-- 顶部-->
        <div>
            <Top :data="item" v-for="item in hotelData.data" :key="item.id"></Top>
        </div>

<!-- 图片-->
<el-row class="img im">
    <el-row class="img">
        <el-col class="pl">
            <img height="368" width="640" v-bind:src="pict" alt="">
            <span></span>
                <el-col class="el-c1 fol" style="margin-left: -10px; margin-right: -10px;">
                    <el-col class="el-c2" style="padding-left: 10px; padding-right: 10px;" v-for="(item,index) in picture" :key="index">
                        <a>
                    <img @click="pic(index)" height="120" width="160" v-bind:src="item" alt=""><span></span>
                </a>
            </el-col>
        </el-col>
        </el-col> 

    </el-row>
</el-row>

<!--地图-->
<el-container>
  <el-aside width="650px"><Map :data="item" v-for="item in hotelData.data" :key="item.id"></Map></el-aside>
  <el-main width="340px">
    <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="风景" name="first"></el-tab-pane>
    <el-tab-pane label="交通" name="second"></el-tab-pane>
  </el-tabs>
</el-main>
</el-container>  

<!-- 价格-->
<div><Price :data="item" v-for="item in hotelData.data" :key="item.id"></Price></div>


<!--酒店信息-->
<div>
    <Views :data="item" v-for="item in hotelData.data" :key="item.id"></Views>
</div>
<!--酒店评价-->
<div>
    <Reviews :data="item" v-for="item in hotelData.data" :key="item.id"></Reviews>
</div>
    </div>
    
    </section>
    
    
  
</template>

<script>
import Map from "@/components/hotel/hotelmap.vue"
import Top from "@/components/hotel/hoteltop.vue"
import Price from "@/components/hotel/hotelprice.vue"
import Views from "@/components/hotel/hotelviews.vue"
import Reviews from "@/components/hotel/hotelreviews.vue"
export default {
    components:{ Map, Top, Price, Views, Reviews},
    data() {
        return {
          hotelData:{
            data:{},
          },
          res:"",
          picture:['http://fe-xianyun-web.itheima.net/images/hotel-pics/1.jpeg',
          'http://fe-xianyun-web.itheima.net/images/hotel-pics/2.jpeg',
          'http://fe-xianyun-web.itheima.net/images/hotel-pics/3.jpeg',
          'http://fe-xianyun-web.itheima.net/images/hotel-pics/4.jpeg',
          'http://fe-xianyun-web.itheima.net/images/hotel-pics/5.jpeg',
          'http://fe-xianyun-web.itheima.net/images/hotel-pics/6.jpeg',
        ],
        pict:'http://fe-xianyun-web.itheima.net/images/hotel-pics/1.jpeg',
        }
    },
    mounted(){
        this.getHotels();
    },
    watch:{
        "$route"(){
            this.getHotels()
        }
      },
    methods: {
        pic(index){
            this.pict = this.picture[index]
        },
      handleClick(tab, event) {
        console.log(tab, event);
      },
      getHotels(){
        console.log("获取浏览器地址栏上的参数：",this.$route.query);
        let query = this.$route.query
        console.log(110,query)
        this.$axios({
            url:'/hotels',
            params:{
                id: query.id,
            }
        }).then(res=>{
            console.log(57,res);
            this.hotelData = res.data;
        });
      },
    }
}

</script>

<style scoped lang="less">

.con{
    width: 1000px;
    margin: 0 auto;
}
.img{
    box-sizing: border-box;
}
.pl{
    float: right;
    position: relative;
}
.el-c1{
    width: 33.33333%
}
.el-c2{
    width: 50%;
    text-align:left;
    cursor: pointer;
}
.fol{
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.im{
    margin: 40px 0;
}

</style>